<template>
    <section>
        <!--列表-->
        <el-table :data="details" @selection-change="selsChange"
                  style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="name" label="产品明细" sortable>
            </el-table-column>
            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </template>
                <template scope="scope">
                    <el-button type="warning" size="small" @click="handleEdit(scope.$index, scope.row)">修改
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize"
                           :total="total" style="float:right;">

            </el-pagination>
        </el-col>
        <!--新增/编辑 界面
             :rules: 定义校验规则的
             ref="ruleForm"简单理解就是form表单的id一样
        -->
        <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="rules" ref="ruleForm" label-width="80px">
                <!--prop="name"：校验的字段-->
                <el-form-item label="产品名称" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品类型" prop="types_Id">
                    <el-select v-model="addForm.types_Id"  clearable placeholder="请选择">
                        <el-option
                                v-for="item in types"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    export default {
        data() {
            return {
                //校验不填字段
                rules: {
                    name: [
                        {required: true, message: '产品明细', trigger: 'blur'}
                    ],
                    typesId: [
                        {required: true, message: '产品类型', trigger: 'blur'}
                    ],
                },
                //是否弹出窗体，默认不弹出
                addFormVisible: false,
                //模态框数据
                addForm: {
                    //部门id
                    id: "",
                    //部门名称
                    name: "",
                    //部门经理
                    types_Id: "",
                },
                //所有产品类型
                types: [],
                //弹出框标题
                title: "",
                //默认不弹出窗体
                listLoading: false,
                //所有产品列表
                details: [],
                //批量删除列表选中列
                sels: [],
                //总条数默认0
                total: 0,
                //每页条数默认10
                pageSize: 10,
                //默认当前页
                currentPage: 1,
                //状态的启用禁用
                filters: {
                    //部门名
                    name: "",
                    //状态
                    state: ""
                },
            }
        },
        methods: {
            //查询所有产品类型
            getTypesId() {
                this.$http.patch("/detail/findtypesId").then(res => {
                    this.types = res.data;
                })
            },
            //获取用户列表
            getDetails() {
                //发送Ajax请求后台获取数据  axios
                let para = {
                    "currentPage": this.currentPage, "pageSize": this.pageSize
                };
                this.listLoading = true; //显示加载圈
                this.$http.patch("/detail", para)
                    .then(res => {
                        //解构表达式
                        let {list, total} = res.data;
                        this.details = list;
                        this.total = total;
                        this.listLoading = false;  //关闭加载圈
                    });
            },

            //新增按钮绑定事件
            handleAdd: function () {
                //标题更改
                title:"新增";
                //清空前需要校验规则，才能进行重置校验的信息
                if (this.$refs["ruleForm"]) {
                    this.$refs["ruleForm"].resetFields();
                }
                //手动清空form表单
                for (var k in this.addForm) {
                    //设置表单列表的内容K 为 空
                    this.addForm[k] = "";
                }
                //弹出窗口框
                this.addFormVisible = true;
            },

            //删除
            handleDel: function (index, row) {
                //弹出提示框
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/detail/" + row.id).then(res => {
                        //返回信息为两个值
                        let {success, msg} = res.data;
                        //判断是否成功
                        if (success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            //刷新页面
                            this.getDetails()
                        } else {
                            this.$message('运行出错了。');
                        }
                    })
                }).catch(() => {
                });
            },
            //批量删除
            batchRemove: function () {
                //弹出提示框
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("/detail/batchRemove", this.sels).then(res => {
                        //返回信息为两个值
                        let {success, msg} = res.data;
                        //判断是否成功
                        if (success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            //刷新页面
                            this.getDetails()
                        } else {
                            this.$message('运行出错了。');
                        }
                    })
                }).catch(() => {
                });
            },
            //修改按钮绑定事件
            handleEdit: function (index, row) {
                console.debug(row);
                //更改标题  修改
                title:"修改";
                //获取大部分的属性的方法
                for (var k in this.addForm) {
                    this.addForm[k] = row[k];
                }
                this.addForm.types_Id = row.types_Id
                //弹出模态框
                this.addFormVisible = true;
            },
            //提交按钮对应事件
            addSubmit: function () {
                console.debug(this.addForm)
                //提交表单之前校验
                this.$refs["ruleForm"].validate((valid) => {
                    //校验通过后进行判断
                    if (valid) {
                        this.$http.post("/detail", this.addForm).then(res => {
                            let {success, msg} = res.data
                            if (success) {
                                //提交成功，关闭模态框
                                this.addFormVisible = false;
                                this.$message({
                                    message: '成功',
                                    type: 'success'
                                });
                                //刷新界面
                                this.getDetails();
                            } else {//相反失败
                                this.$message.error(msg)
                            }
                        })
                    }
                })
            },

            //点击复选框此事件  返回勾选框对应数据
            selsChange: function (vals) {
                this.sels = vals
            },

            //页码发生改变的时候触发此函数
            handleCurrentChange(val) {
                this.currentPage = val;
                //刷新得到数据
                this.getDetails();
            },
        },
        mounted() {
            //加载所有的分页列表
            this.getDetails();
            //加载产品类型
            this.getTypesId();
        }
    }
</script>
<style scoped>
</style>